<template>
    <div class="yorha-normal-box" ref="yorhaNormalBox">
        <div class="topper">
            <span class="little-box"></span>
            <span class="title">{{title}}</span>
        </div>
        <div class="contain">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import {onMounted, getCurrentInstance} from "vue";

let props = defineProps(['width','height','title'])
const instance = getCurrentInstance()

function setSize() {
    instance.refs.yorhaNormalBox.style.width = props.width
    instance.refs.yorhaNormalBox.style.height = props.height
}

onMounted(()=>{
    setSize()
})
</script>

<script>
export default {
    name:"YorhaNormalBox"
}
</script>

<style lang="less" scoped>
@import "../../style";
.yorha-normal-box {
    width: 400px;
    height: 400px;
    background: @yellowWhite;
    box-shadow: 2px 2px 0px @yellow;
    &>.topper {
        width: 100%;
        height: 36px;
        background: @gray;
        display: flex;
        &>.little-box {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 8px;
            background: @yellowWhite;
        }
        &>.title {
            display: inline-block;
            margin: 8px 0;
            color: @yellowWhite;
            font-size: medium;
            z-index: 1;
        }
    }
    &>.contain {
        width: 100%;
        height: calc(100% - 36px);
    }
}
</style>